<template>
    <div>
        <span>房号名称</span>
        <input type="text" v-model="queryInfo.roomName" />
        <span>房号状态</span>
        <select v-model="queryInfo.state">
            <option value="">请选择</option>
            <option :value="1">上架</option>
            <option :value="0">下架</option>
        </select>
        <input type="button" value="查询" @click="getlist" class="btn btn-primary" />
        <h2>房号显示</h2>
        <input type="button" value="添加" @click="ok" class="btn btn-primary" />
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房号名称</td>
                    <td>备注</td>
                    <td>房号状态</td>
                    <td>手机号</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data" :key="item.id">
                    <td>{{item.roomName}}</td>
                    <td>{{item.roomDesc}}</td>
                    <td>{{item.state==1?'上架':'下架'}}</td>
                    <td>{{item.phone}}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger" @click="RoomDel(item.id)" />
                        <input type="button" value="编辑" class="btn btn-primary" @click="Roomput(item.id)" />
                        <input type="button" v-if="item.state==0" value="上架" class="btn btn-success" @click="RoomState(item.id,0)" />
                        <input type="button" v-else value="下架" class="btn btn-success" @click="RoomState(item.id,1)" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>


<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter , useRoute } from 'vue-router'
import axios from 'axios';
import { get } from 'node_modules/axios/index.cjs';
let router = useRouter();   
let route = useRoute();
let queryInfo=reactive({
    roomName:'',
    state:'',
})
let data:any=ref([]);
onMounted(()=>{
    getlist();
})
const getlist=()=>{
    axios({
        url:'/api/RooomNumber/GetRoomNumbersList',
        method:'get',
        params:queryInfo
    }).then((res)=>{
        console.log(res);
        data.value=res.data;
    })
}
let ok=()=>{
    router.push({
        path:'RoomNumberAdd',
    })
}
//删除
const RoomDel=(id:any)=>{
    var f=confirm('确定删除吗？')
    if(f){
        axios({
            url:'/api/RooomNumber/Delete',
            method:'delete',
            params:{id:id}
        })
        .then((res)=>{
            if(res.data==1){
                alert('删除成功');
                getlist();
            }
            else{
                alert('删除失败');
            }
        })
        .catch((err)=>{
            console.log(err);
        })
    }
}
const Roomput=(id:any)=>{
    router.push({
        path:'/RoomNumberUpdate',
        query:{
            id:id
        }
    })
}
//修改状态
const RoomState=(id:any,state:any)=>{
    axios({
        url:'/api/RooomNumber/UpdateState',
        method:'put',
        params:{id:id,state:state}
    })
    .then((res)=>{
        if(res.data==1){
            alert('修改成功');
            getlist();
        }
        else{
            alert('修改失败');
        }
    })
    .catch((err)=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>